<template>
  <div class="zhuhai-consulting-dashboard min-h-screen p-6" 
       :class="themeState.isLight ? 'bg-gradient-to-br from-gray-50 to-gray-100' : 'system-bg'">
    <!-- Header Section -->
    <div class="glass-card p-8 mb-8">
      <div class="flex items-center justify-between mb-6">
        <div class="flex items-center">
          <div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center mr-6">
            <Building class="w-8 h-8 text-white" />
          </div>
          <div>
            <h1 class="text-3xl font-bold text-white mb-2">珠海商略咨询公司</h1>
            <p class="text-blue-200">欧洲市场合规服务专家 | European Market Compliance Specialist</p>
            <div class="flex items-center mt-2">
              <MapPin class="w-4 h-4 text-green-400 mr-2" />
              <span class="text-green-400 text-sm">在线服务中 • 24/7 实时监控</span>
            </div>
          </div>
        </div>
        <div class="text-right">
          <div class="text-2xl font-bold text-electric-500">€2.3M</div>
          <div class="text-white/70 text-sm">本月为客户节省合规成本</div>
        </div>
      </div>

      <!-- Key Statistics -->
      <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div class="bg-white/5 rounded-lg p-4 text-center">
          <div class="text-2xl font-bold text-green-400 mb-2">156</div>
          <div class="text-white/70 text-sm">活跃客户项目</div>
        </div>
        <div class="bg-white/5 rounded-lg p-4 text-center">
          <div class="text-2xl font-bold text-yellow-400 mb-2">27</div>
          <div class="text-white/70 text-sm">欧盟国家覆盖</div>
        </div>
        <div class="bg-white/5 rounded-lg p-4 text-center">
          <div class="text-2xl font-bold text-blue-400 mb-2">98.7%</div>
          <div class="text-white/70 text-sm">合规通过率</div>
        </div>
        <div class="bg-white/5 rounded-lg p-4 text-center">
          <div class="text-2xl font-bold text-purple-400 mb-2">3,247</div>
          <div class="text-white/70 text-sm">法规库更新数</div>
        </div>
      </div>
    </div>

    <!-- Real-time Alert System -->
    <div class="glass-card p-8 mb-8">
      <div class="flex items-center justify-between mb-6">
        <h2 class="text-2xl font-bold text-white flex items-center">
          <AlertTriangle class="w-8 h-8 mr-3 text-red-400" />
          实时合规预警系统
        </h2>
        <div class="flex items-center space-x-2">
          <div class="w-3 h-3 bg-green-400 rounded-full animate-pulse"></div>
          <span class="text-green-400 text-sm">系统运行正常</span>
        </div>
      </div>

      <!-- Active Alerts -->
      <div class="space-y-4 mb-6">
        <div class="bg-red-500/20 border border-red-500/30 rounded-lg p-4">
          <div class="flex items-center justify-between mb-3">
            <div class="flex items-center">
              <AlertCircle class="w-5 h-5 text-red-400 mr-2" />
              <span class="text-red-400 font-semibold">紧急合规更新</span>
            </div>
            <span class="text-red-300 text-sm">2分钟前</span>
          </div>
          <h3 class="text-white font-semibold mb-2">欧盟包装废物法规重大修订（PPWR）</h3>
          <p class="text-white/80 text-sm mb-3">欧盟议会批准新包装废物法规，2025年1月1日生效。影响所有进入欧盟市场的包装产品。</p>
          <div class="flex items-center justify-between">
            <div class="flex space-x-2">
              <span class="px-2 py-1 bg-red-500/20 text-red-300 rounded text-xs">高优先级</span>
              <span class="px-2 py-1 bg-blue-500/20 text-blue-300 rounded text-xs">影响客户: 23家</span>
            </div>
            <button class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors text-sm">
              立即处理
            </button>
          </div>
        </div>

        <div class="bg-yellow-500/20 border border-yellow-500/30 rounded-lg p-4">
          <div class="flex items-center justify-between mb-3">
            <div class="flex items-center">
              <Clock class="w-5 h-5 text-yellow-400 mr-2" />
              <span class="text-yellow-400 font-semibold">即将生效</span>
            </div>
            <span class="text-yellow-300 text-sm">15分钟前</span>
          </div>
          <h3 class="text-white font-semibold mb-2">德国供应链法案实施细则</h3>
          <p class="text-white/80 text-sm mb-3">德国发布供应链法案实施细则，要求企业建立完善的人权和环境尽职调查机制。</p>
          <div class="flex items-center justify-between">
            <div class="flex space-x-2">
              <span class="px-2 py-1 bg-yellow-500/20 text-yellow-300 rounded text-xs">中优先级</span>
              <span class="px-2 py-1 bg-blue-500/20 text-blue-300 rounded text-xs">影响客户: 8家</span>
            </div>
            <button class="px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors text-sm">
              查看详情
            </button>
          </div>
        </div>
      </div>

      <!-- Alert Settings -->
      <div class="border-t border-white/20 pt-6">
        <h3 class="text-white font-semibold mb-4">预警设置</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div class="bg-white/5 rounded-lg p-4">
            <div class="flex items-center justify-between mb-2">
              <span class="text-white text-sm">环境法规</span>
              <div class="w-12 h-6 bg-green-500 rounded-full relative">
                <div class="w-5 h-5 bg-white rounded-full absolute right-0.5 top-0.5"></div>
              </div>
            </div>
            <div class="text-white/70 text-xs">监控范围: 全欧盟</div>
          </div>
          <div class="bg-white/5 rounded-lg p-4">
            <div class="flex items-center justify-between mb-2">
              <span class="text-white text-sm">产品安全</span>
              <div class="w-12 h-6 bg-green-500 rounded-full relative">
                <div class="w-5 h-5 bg-white rounded-full absolute right-0.5 top-0.5"></div>
              </div>
            </div>
            <div class="text-white/70 text-xs">监控范围: 27个国家</div>
          </div>
          <div class="bg-white/5 rounded-lg p-4">
            <div class="flex items-center justify-between mb-2">
              <span class="text-white text-sm">税务政策</span>
              <div class="w-12 h-6 bg-green-500 rounded-full relative">
                <div class="w-5 h-5 bg-white rounded-full absolute right-0.5 top-0.5"></div>
              </div>
            </div>
            <div class="text-white/70 text-xs">监控范围: 重点市场</div>
          </div>
        </div>
      </div>
    </div>

    <!-- European Market Compliance Dashboard -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
      <!-- Compliance Status -->
      <div class="glass-card p-6">
        <h3 class="text-xl font-bold text-white mb-6 flex items-center">
          <Shield class="w-6 h-6 mr-3 text-green-400" />
          合规状态总览
        </h3>
        <div class="space-y-4">
          <div class="flex items-center justify-between p-4 bg-white/5 rounded-lg">
            <div class="flex items-center">
              <div class="w-3 h-3 bg-green-400 rounded-full mr-3"></div>
              <span class="text-white">CE认证产品</span>
            </div>
            <div class="text-right">
              <div class="text-green-400 font-semibold">234</div>
              <div class="text-white/70 text-xs">100%合规</div>
            </div>
          </div>
          <div class="flex items-center justify-between p-4 bg-white/5 rounded-lg">
            <div class="flex items-center">
              <div class="w-3 h-3 bg-yellow-400 rounded-full mr-3"></div>
              <span class="text-white">REACH法规</span>
            </div>
            <div class="text-right">
              <div class="text-yellow-400 font-semibold">89</div>
              <div class="text-white/70 text-xs">95%合规</div>
            </div>
          </div>
          <div class="flex items-center justify-between p-4 bg-white/5 rounded-lg">
            <div class="flex items-center">
              <div class="w-3 h-3 bg-red-400 rounded-full mr-3"></div>
              <span class="text-white">GDPR合规</span>
            </div>
            <div class="text-right">
              <div class="text-red-400 font-semibold">12</div>
              <div class="text-white/70 text-xs">需要更新</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Country-specific Regulations -->
      <div class="glass-card p-6">
        <h3 class="text-xl font-bold text-white mb-6 flex items-center">
          <Globe class="w-6 h-6 mr-3 text-blue-400" />
          重点国家法规更新
        </h3>
        <div class="space-y-4">
          <div class="p-4 bg-white/5 rounded-lg">
            <div class="flex items-center justify-between mb-2">
              <div class="flex items-center">
                <span class="text-lg mr-2">🇩🇪</span>
                <span class="text-white font-semibold">德国</span>
              </div>
              <span class="px-2 py-1 bg-green-500/20 text-green-300 rounded text-xs">最新</span>
            </div>
            <p class="text-white/80 text-sm">包装法修订案生效，回收责任延伸至在线销售</p>
          </div>
          <div class="p-4 bg-white/5 rounded-lg">
            <div class="flex items-center justify-between mb-2">
              <div class="flex items-center">
                <span class="text-lg mr-2">🇫🇷</span>
                <span class="text-white font-semibold">法国</span>
              </div>
              <span class="px-2 py-1 bg-yellow-500/20 text-yellow-300 rounded text-xs">7天内生效</span>
            </div>
            <p class="text-white/80 text-sm">反浪费法案新规定，禁止销售特定一次性塑料制品</p>
          </div>
          <div class="p-4 bg-white/5 rounded-lg">
            <div class="flex items-center justify-between mb-2">
              <div class="flex items-center">
                <span class="text-lg mr-2">🇳🇱</span>
                <span class="text-white font-semibold">荷兰</span>
              </div>
              <span class="px-2 py-1 bg-blue-500/20 text-blue-300 rounded text-xs">监控中</span>
            </div>
            <p class="text-white/80 text-sm">数字服务税法案进入最终审议阶段</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Client Project Management -->
    <div class="glass-card p-8 mb-8">
      <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
        <Users class="w-8 h-8 mr-3 text-purple-400" />
        客户项目管理中心
      </h2>

      <!-- Project Filters -->
      <div class="flex flex-wrap gap-4 mb-6">
        <button class="px-4 py-2 bg-electric-500 text-white rounded-lg">全部项目</button>
        <button class="px-4 py-2 bg-white/10 text-white rounded-lg hover:bg-white/20">紧急处理</button>
        <button class="px-4 py-2 bg-white/10 text-white rounded-lg hover:bg-white/20">新产品上市</button>
        <button class="px-4 py-2 bg-white/10 text-white rounded-lg hover:bg-white/20">法规变更</button>
      </div>

      <!-- Active Projects -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="bg-white/5 rounded-lg p-6">
          <div class="flex items-center justify-between mb-4">
            <h3 class="text-white font-semibold">智能家居设备CE认证</h3>
            <span class="px-2 py-1 bg-red-500/20 text-red-300 rounded text-xs">紧急</span>
          </div>
          <div class="space-y-3">
            <div class="flex items-center justify-between">
              <span class="text-white/70 text-sm">客户</span>
              <span class="text-white text-sm">深圳科技有限公司</span>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-white/70 text-sm">目标市场</span>
              <span class="text-white text-sm">德国、法国、意大利</span>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-white/70 text-sm">进度</span>
              <div class="flex items-center">
                <div class="w-20 h-2 bg-white/20 rounded-full mr-2">
                  <div class="w-16 h-2 bg-red-400 rounded-full"></div>
                </div>
                <span class="text-white text-sm">80%</span>
              </div>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-white/70 text-sm">预警</span>
              <span class="text-red-400 text-sm">新EMC标准2025年1月生效</span>
            </div>
          </div>
          <button class="w-full mt-4 px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors">
            立即更新认证方案
          </button>
        </div>

        <div class="bg-white/5 rounded-lg p-6">
          <div class="flex items-center justify-between mb-4">
            <h3 class="text-white font-semibold">食品添加剂EFSA评估</h3>
            <span class="px-2 py-1 bg-green-500/20 text-green-300 rounded text-xs">正常</span>
          </div>
          <div class="space-y-3">
            <div class="flex items-center justify-between">
              <span class="text-white/70 text-sm">客户</span>
              <span class="text-white text-sm">珠海食品集团</span>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-white/70 text-sm">目标市场</span>
              <span class="text-white text-sm">全欧盟</span>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-white/70 text-sm">进度</span>
              <div class="flex items-center">
                <div class="w-20 h-2 bg-white/20 rounded-full mr-2">
                  <div class="w-12 h-2 bg-green-400 rounded-full"></div>
                </div>
                <span class="text-white text-sm">60%</span>
              </div>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-white/70 text-sm">状态</span>
              <span class="text-green-400 text-sm">EFSA审查中</span>
            </div>
          </div>
          <button class="w-full mt-4 px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors">
            查看审查进度
          </button>
        </div>
      </div>
    </div>

    <!-- 功能操作面板 -->
    <div class="glass-card p-8 mb-8">
      <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
        <Shield class="w-8 h-8 mr-3 text-purple-400" />
        智能合规管理系统
      </h2>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- 法规监控 -->
        <div class="space-y-4">
          <h3 class="text-white font-semibold mb-3">法规监控</h3>
          <div class="space-y-2">
            <button @click="openRegulationAlert" class="w-full px-4 py-3 bg-blue-500/20 text-blue-300 rounded-lg hover:bg-blue-500/30 transition-colors flex items-center">
              <AlertTriangle class="w-4 h-4 mr-2" />
              实时法规预警
            </button>
            <button @click="compareRegulations" class="w-full px-4 py-3 bg-indigo-500/20 text-indigo-300 rounded-lg hover:bg-indigo-500/30 transition-colors flex items-center">
              <Globe class="w-4 h-4 mr-2" />
              多国法规对比
            </button>
            <button @click="analyzeRegulationTrends" class="w-full px-4 py-3 bg-purple-500/20 text-purple-300 rounded-lg hover:bg-purple-500/30 transition-colors flex items-center">
              <TrendingUp class="w-4 h-4 mr-2" />
              法规趋势分析
            </button>
          </div>
        </div>

        <!-- 客户服务 -->
        <div class="space-y-4">
          <h3 class="text-white font-semibold mb-3">客户服务</h3>
          <div class="space-y-2">
            <button @click="openProjectManagement" class="w-full px-4 py-3 bg-green-500/20 text-green-300 rounded-lg hover:bg-green-500/30 transition-colors flex items-center">
              <Users class="w-4 h-4 mr-2" />
              客户项目管理
            </button>
            <button @click="openOnlineConsulting" class="w-full px-4 py-3 bg-emerald-500/20 text-emerald-300 rounded-lg hover:bg-emerald-500/30 transition-colors flex items-center">
              <MessageCircle class="w-4 h-4 mr-2" />
              在线咨询系统
            </button>
            <button @click="bookExpertAppointment" class="w-full px-4 py-3 bg-teal-500/20 text-teal-300 rounded-lg hover:bg-teal-500/30 transition-colors flex items-center">
              <Calendar class="w-4 h-4 mr-2" />
              专家预约服务
            </button>
          </div>
        </div>

        <!-- 合规检查 -->
        <div class="space-y-4">
          <h3 class="text-white font-semibold mb-3">合规检查</h3>
          <div class="space-y-2">
            <button @click="quickComplianceCheck" class="w-full px-4 py-3 bg-yellow-500/20 text-yellow-300 rounded-lg hover:bg-yellow-500/30 transition-colors flex items-center">
              <CheckCircle class="w-4 h-4 mr-2" />
              快速合规检测
            </button>
            <button @click="reviewCertificationDocs" class="w-full px-4 py-3 bg-orange-500/20 text-orange-300 rounded-lg hover:bg-orange-500/30 transition-colors flex items-center">
              <FileText class="w-4 h-4 mr-2" />
              认证文件审核
            </button>
            <button @click="generateRiskAssessment" class="w-full px-4 py-3 bg-red-500/20 text-red-300 rounded-lg hover:bg-red-500/30 transition-colors flex items-center">
              <Shield class="w-4 h-4 mr-2" />
              风险评估报告
            </button>
          </div>
        </div>

        <!-- 报告生成 -->
        <div class="space-y-4">
          <h3 class="text-white font-semibold mb-3">报告生成</h3>
          <div class="space-y-2">
            <button @click="generateComplianceReport" class="w-full px-4 py-3 bg-pink-500/20 text-pink-300 rounded-lg hover:bg-pink-500/30 transition-colors flex items-center">
              <BarChart class="w-4 h-4 mr-2" />
              合规状况报告
            </button>
            <button @click="downloadRegulationSummary" class="w-full px-4 py-3 bg-violet-500/20 text-violet-300 rounded-lg hover:bg-violet-500/30 transition-colors flex items-center">
              <Download class="w-4 h-4 mr-2" />
              法规更新摘要
            </button>
            <button @click="generateClientPresentation" class="w-full px-4 py-3 bg-cyan-500/20 text-cyan-300 rounded-lg hover:bg-cyan-500/30 transition-colors flex items-center">
                                      <Presentation class="w-4 h-4 mr-2" />
              客户汇报材料
            </button>
          </div>
        </div>
      </div>

      <!-- 一键服务 -->
      <div class="mt-8 pt-6 border-t border-white/20">
        <h3 class="text-white font-semibold mb-4">一键服务</h3>
        <div class="flex flex-wrap gap-3">
          <button @click="generateEmergencyPlan" class="px-4 py-2 bg-gradient-to-r from-blue-500/20 to-indigo-500/20 text-white rounded-lg hover:from-blue-500/30 hover:to-indigo-500/30 transition-all">
            <AlertTriangle class="w-4 h-4 mr-2 inline" />
            生成紧急合规方案
          </button>
          <button @click="batchNotifyClients" class="px-4 py-2 bg-gradient-to-r from-green-500/20 to-emerald-500/20 text-white rounded-lg hover:from-green-500/30 hover:to-emerald-500/30 transition-all">
            <Users class="w-4 h-4 mr-2 inline" />
            批量客户通知
          </button>
          <button @click="getAIRecommendations" class="px-4 py-2 bg-gradient-to-r from-purple-500/20 to-pink-500/20 text-white rounded-lg hover:from-purple-500/30 hover:to-pink-500/30 transition-all">
            <Brain class="w-4 h-4 mr-2 inline" />
            AI智能建议
          </button>
          <button @click="generateMonthlyReport" class="px-4 py-2 bg-gradient-to-r from-yellow-500/20 to-orange-500/20 text-white rounded-lg hover:from-yellow-500/30 hover:to-orange-500/30 transition-all">
            <BarChart class="w-4 h-4 mr-2 inline" />
            生成月度报告
          </button>
        </div>
      </div>
    </div>

    <!-- 通知系统 -->
    <div class="fixed top-4 right-4 z-50 space-y-2">
      <div 
        v-for="notification in notifications" 
        :key="notification.id"
        class="max-w-sm p-4 rounded-lg shadow-lg backdrop-blur-md border transition-all duration-300 transform"
        :class="{
          'bg-blue-500/20 border-blue-500/50 text-blue-300': notification.type === 'info',
          'bg-green-500/20 border-green-500/50 text-green-300': notification.type === 'success',
          'bg-yellow-500/20 border-yellow-500/50 text-yellow-300': notification.type === 'warning',
          'bg-red-500/20 border-red-500/50 text-red-300': notification.type === 'error'
        }"
      >
        <div class="flex items-start justify-between">
          <div class="flex-1">
            <p class="text-sm font-medium">{{ notification.message }}</p>
            <p class="text-xs opacity-75 mt-1">{{ notification.timestamp }}</p>
          </div>
          <button 
            @click="notifications.splice(notifications.indexOf(notification), 1)"
            class="ml-2 text-current opacity-75 hover:opacity-100"
          >
            ×
          </button>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="isLoading" class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50">
      <div class="bg-white/10 backdrop-blur-md p-8 rounded-lg border border-white/20 text-center">
        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"></div>
        <p class="text-white">处理中...</p>
      </div>
    </div>

    <!-- 模态框 -->
    <div v-if="showModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4" @click="closeModal">
      <div class="bg-gray-900/95 backdrop-blur-md rounded-lg border border-white/20 max-w-4xl w-full max-h-[90vh] overflow-y-auto" @click.stop>
        <div class="p-6">
          <div class="flex items-center justify-between mb-6">
            <h2 class="text-2xl font-bold text-white">{{ modalContent.title }}</h2>
            <button @click="closeModal" class="text-gray-400 hover:text-white text-2xl">×</button>
          </div>
          
          <!-- 法规预警模态框 -->
          <div v-if="modalContent.type === 'regulation_alert'" class="space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div v-for="alert in modalContent.data.urgentAlerts" :key="alert.country" 
                   class="bg-white/5 rounded-lg p-4 border-l-4" 
                   :class="alert.severity === 'high' ? 'border-red-500' : 'border-yellow-500'">
                <div class="flex items-center justify-between mb-2">
                  <h3 class="text-white font-semibold">{{ alert.country }}</h3>
                  <span class="px-2 py-1 rounded text-xs" 
                        :class="alert.severity === 'high' ? 'bg-red-500/20 text-red-300' : 'bg-yellow-500/20 text-yellow-300'">
                    {{ alert.severity === 'high' ? '高风险' : '中风险' }}
                  </span>
                </div>
                <p class="text-blue-300 font-medium mb-2">{{ alert.regulation }}</p>
                <p class="text-white/70 text-sm mb-2">截止日期: {{ alert.deadline }}</p>
                <p class="text-white/70 text-sm">{{ alert.impact }}</p>
              </div>
            </div>
            <div class="bg-white/5 rounded-lg p-4">
              <h3 class="text-white font-semibold mb-3">建议行动</h3>
              <ul class="space-y-2">
                <li v-for="rec in modalContent.data.recommendations" :key="rec" 
                    class="flex items-start text-white/80">
                  <span class="text-green-400 mr-2">•</span>
                  {{ rec }}
                </li>
              </ul>
            </div>
          </div>

          <!-- 专家预约模态框 -->
          <div v-if="modalContent.type === 'expert_booking'" class="space-y-4">
            <div v-for="slot in modalContent.data.availableSlots" :key="slot.expert" 
                 class="bg-white/5 rounded-lg p-4 border border-white/10">
              <div class="flex items-center justify-between mb-2">
                <h3 class="text-white font-semibold">{{ slot.expert }}</h3>
                <span class="px-2 py-1 rounded text-xs" 
                      :class="slot.available ? 'bg-green-500/20 text-green-300' : 'bg-gray-500/20 text-gray-300'">
                  {{ slot.available ? '可预约' : '已约满' }}
                </span>
              </div>
              <p class="text-blue-300 mb-2">{{ slot.time }}</p>
              <p class="text-white/70 text-sm mb-3">专长: {{ slot.specialty }}</p>
              <button v-if="slot.available" 
                      @click="alert('预约成功！专家将在指定时间与您联系。')" 
                      class="w-full px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
                立即预约
              </button>
              <button v-else class="w-full px-4 py-2 bg-gray-500 text-white rounded-lg cursor-not-allowed" disabled>
                已约满
              </button>
            </div>
          </div>

          <!-- 合规检查结果模态框 -->
          <div v-if="modalContent.type === 'compliance_check'" class="space-y-6">
            <div class="text-center">
              <div class="text-4xl font-bold text-white mb-2">{{ modalContent.data.overallScore }}%</div>
              <p class="text-white/70">总体合规评分</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div v-for="check in modalContent.data.checks" :key="check.category" 
                   class="bg-white/5 rounded-lg p-4 border-l-4" 
                   :class="{
                     'border-green-500': check.status === 'passed',
                     'border-yellow-500': check.status === 'warning',
                     'border-red-500': check.status === 'alert'
                   }">
                <h3 class="text-white font-semibold mb-2">{{ check.category }}</h3>
                <div class="text-2xl font-bold mb-2" 
                     :class="{
                       'text-green-400': check.status === 'passed',
                       'text-yellow-400': check.status === 'warning',
                       'text-red-400': check.status === 'alert'
                     }">
                  {{ check.score }}%
                </div>
                <p class="text-white/70 text-sm">{{ check.details }}</p>
              </div>
            </div>
          </div>

          <!-- 紧急合规方案模态框 -->
          <div v-if="modalContent.type === 'emergency_plan'" class="space-y-6">
            <div class="bg-red-500/20 border border-red-500/50 rounded-lg p-4">
              <div class="flex items-center mb-3">
                <AlertTriangle class="w-6 h-6 text-red-400 mr-2" />
                <h3 class="text-red-300 font-semibold">紧急预案已启动</h3>
              </div>
              <p class="text-white/80">受影响客户: {{ modalContent.data.affectedClients }}个</p>
              <p class="text-white/80">响应时间: {{ modalContent.data.timeline }}</p>
            </div>
            <div class="bg-white/5 rounded-lg p-4">
              <h3 class="text-white font-semibold mb-3">紧急行动清单</h3>
              <ul class="space-y-2">
                <li v-for="(action, index) in modalContent.data.urgentActions" :key="index" 
                    class="flex items-start text-white/80">
                  <span class="text-red-400 mr-2">{{ index + 1 }}.</span>
                  {{ action }}
                </li>
              </ul>
            </div>
            <div class="bg-white/5 rounded-lg p-4">
              <h3 class="text-white font-semibold mb-3">紧急联系方式</h3>
              <ul class="space-y-2">
                <li v-for="contact in modalContent.data.contactList" :key="contact" 
                    class="text-white/80">
                  {{ contact }}
                </li>
              </ul>
            </div>
          </div>

          <!-- AI建议模态框 -->
          <div v-if="modalContent.type === 'ai_recommendations'" class="space-y-6">
            <div class="space-y-4">
              <h3 class="text-white font-semibold">优先级建议</h3>
              <div v-for="rec in modalContent.data.priority" :key="rec.suggestion" 
                   class="bg-white/5 rounded-lg p-4 border-l-4" 
                   :class="rec.level === 'high' ? 'border-red-500' : 'border-yellow-500'">
                <div class="flex items-center justify-between mb-2">
                  <h4 class="text-white font-medium">{{ rec.suggestion }}</h4>
                  <span class="px-2 py-1 rounded text-xs" 
                        :class="rec.level === 'high' ? 'bg-red-500/20 text-red-300' : 'bg-yellow-500/20 text-yellow-300'">
                    {{ rec.level === 'high' ? '高优先级' : '中优先级' }}
                  </span>
                </div>
                <p class="text-white/70 text-sm mb-2">{{ rec.reason }}</p>
                <p class="text-green-400 text-sm font-medium">{{ rec.expectedReturn }}</p>
              </div>
            </div>
            <div class="bg-white/5 rounded-lg p-4">
              <h3 class="text-white font-semibold mb-3">市场趋势分析</h3>
              <ul class="space-y-2">
                <li v-for="trend in modalContent.data.marketTrends" :key="trend" 
                    class="flex items-start text-white/80">
                  <span class="text-blue-400 mr-2">•</span>
                  {{ trend }}
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- AI-Powered Insights -->
    <div class="glass-card p-8">
      <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
        <Brain class="w-8 h-8 mr-3 text-purple-400" />
        AI智能洞察与建议
      </h2>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Regulatory Trends -->
        <div class="bg-white/5 rounded-lg p-6">
          <h3 class="text-white font-semibold mb-4 flex items-center">
            <TrendingUp class="w-5 h-5 mr-2 text-blue-400" />
            法规趋势分析
          </h3>
          <div class="space-y-3">
            <div class="p-3 bg-blue-500/10 rounded-lg">
              <div class="text-blue-400 font-semibold text-sm mb-1">环保法规加强</div>
              <div class="text-white/80 text-xs">预计2025年将有85%的欧盟国家出台更严格的包装法规</div>
            </div>
            <div class="p-3 bg-green-500/10 rounded-lg">
              <div class="text-green-400 font-semibold text-sm mb-1">数字化认证</div>
              <div class="text-white/80 text-xs">CE认证流程数字化，审批时间缩短30%</div>
            </div>
            <div class="p-3 bg-yellow-500/10 rounded-lg">
              <div class="text-yellow-400 font-semibold text-sm mb-1">供应链透明度</div>
              <div class="text-white/80 text-xs">新法规要求提供完整供应链可追溯性证明</div>
            </div>
          </div>
        </div>

        <!-- Risk Assessment -->
        <div class="bg-white/5 rounded-lg p-6">
          <h3 class="text-white font-semibold mb-4 flex items-center">
            <AlertTriangle class="w-5 h-5 mr-2 text-red-400" />
            风险评估
          </h3>
          <div class="space-y-3">
            <div class="flex items-center justify-between p-3 bg-red-500/10 rounded-lg">
              <div>
                <div class="text-red-400 font-semibold text-sm">REACH法规更新</div>
                <div class="text-white/80 text-xs">影响23个客户项目</div>
              </div>
              <div class="text-red-400 text-xl font-bold">高</div>
            </div>
            <div class="flex items-center justify-between p-3 bg-yellow-500/10 rounded-lg">
              <div>
                <div class="text-yellow-400 font-semibold text-sm">Brexit后续影响</div>
                <div class="text-white/80 text-xs">英国贸易协议变化</div>
              </div>
              <div class="text-yellow-400 text-xl font-bold">中</div>
            </div>
            <div class="flex items-center justify-between p-3 bg-green-500/10 rounded-lg">
              <div>
                <div class="text-green-400 font-semibold text-sm">税务政策稳定</div>
                <div class="text-white/80 text-xs">无重大变化预期</div>
              </div>
              <div class="text-green-400 text-xl font-bold">低</div>
            </div>
          </div>
        </div>

        <!-- Recommendations -->
        <div class="bg-white/5 rounded-lg p-6">
          <h3 class="text-white font-semibold mb-4 flex items-center">
            <Lightbulb class="w-5 h-5 mr-2 text-yellow-400" />
            智能建议
          </h3>
          <div class="space-y-3">
            <div class="p-3 bg-purple-500/10 rounded-lg">
              <div class="text-purple-400 font-semibold text-sm mb-1">优化认证流程</div>
              <div class="text-white/80 text-xs">建议为客户建立标准化合规清单，可节省60%时间</div>
              <button class="mt-2 px-3 py-1 bg-purple-500/20 text-purple-300 rounded text-xs">
                查看详情
              </button>
            </div>
            <div class="p-3 bg-blue-500/10 rounded-lg">
              <div class="text-blue-400 font-semibold text-sm mb-1">扩展服务范围</div>
              <div class="text-white/80 text-xs">北欧市场合规需求增长45%，建议增加瑞典、挪威服务</div>
              <button class="mt-2 px-3 py-1 bg-blue-500/20 text-blue-300 rounded text-xs">
                市场分析
              </button>
            </div>
            <div class="p-3 bg-green-500/10 rounded-lg">
              <div class="text-green-400 font-semibold text-sm mb-1">技术升级建议</div>
              <div class="text-white/80 text-xs">建议部署AI文档审查系统，提高审查效率3倍</div>
              <button class="mt-2 px-3 py-1 bg-green-500/20 text-green-300 rounded text-xs">
                技术方案
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { themeState } from '../services/themeService.js'
import {
  Building,
  MapPin,
  AlertTriangle,
  AlertCircle,
  Clock,
  Shield,
  Globe,
  Users,
  Brain,
  TrendingUp,
  Lightbulb,
  CheckCircle,
  MessageCircle,
  Calendar,
  FileText,
  BarChart,
  Download,
  Presentation
} from 'lucide-vue-next'

export default {
  name: 'ZhuhaiConsultingDashboard',
  components: {
    Building,
    MapPin,
    AlertTriangle,
    AlertCircle,
    Clock,
    Shield,
    Globe,
    Users,
    Brain,
    TrendingUp,
    Lightbulb,
    CheckCircle,
    MessageCircle,
    Calendar,
    FileText,
    BarChart,
    Download,
    Presentation
  },
  
  setup() {
    const realTimeData = reactive({
      activeProjects: 156,
      countriesCovered: 27,
      complianceRate: 98.7,
      regulationUpdates: 3247
    })

    const notifications = ref([])
    const isLoading = ref(false)
    const showModal = ref(false)
    const modalContent = ref(null)

    // 通知系统
    const addNotification = (message, type = 'info') => {
      const notification = {
        id: Date.now(),
        message,
        type,
        timestamp: new Date().toLocaleTimeString()
      }
      notifications.value.unshift(notification)
      
      setTimeout(() => {
        const index = notifications.value.findIndex(n => n.id === notification.id)
        if (index > -1) {
          notifications.value.splice(index, 1)
        }
      }, 5000)
    }

    // 法规监控功能
    const openRegulationAlert = async () => {
      isLoading.value = true
      addNotification('正在加载实时法规预警系统...', 'info')
      
      setTimeout(() => {
        modalContent.value = {
          title: '实时法规预警',
          type: 'regulation_alert',
          data: {
            urgentAlerts: [
              {
                country: '德国',
                regulation: 'PPWR包装法案',
                deadline: '2025年3月15日',
                impact: '影响12个客户项目',
                severity: 'high'
              },
              {
                country: '法国',
                regulation: '反浪费法案',
                deadline: '2025年2月1日',
                impact: '影响5个客户项目',
                severity: 'medium'
              }
            ],
            recommendations: [
              '立即通知相关客户准备替代包装方案',
              '启动紧急合规评估流程',
              '联系欧盟认证机构确认具体要求'
            ]
          }
        }
        showModal.value = true
        isLoading.value = false
      }, 2000)
    }

    const compareRegulations = () => {
      window.location.href = '#/region-compare?focus=regulations'
      addNotification('正在打开多国法规对比工具...', 'info')
    }

    const analyzeRegulationTrends = () => {
      window.location.href = '#/policy-simulation?model=regulation_trends'
      addNotification('正在分析法规发展趋势...', 'info')
    }

    // 客户服务功能
    const openProjectManagement = () => {
      window.location.href = '#/user-center?tab=projects'
      addNotification('正在打开客户项目管理系统...', 'info')
    }

    const openOnlineConsulting = () => {
      window.location.href = '#/ai-chat'
      addNotification('正在启动AI智能咨询服务...', 'info')
    }

    const bookExpertAppointment = async () => {
      isLoading.value = true
      addNotification('正在连接专家预约系统...', 'info')
      
      setTimeout(() => {
        modalContent.value = {
          title: '专家预约服务',
          type: 'expert_booking',
          data: {
            availableSlots: [
              {
                expert: '李博士 - 欧盟CE认证专家',
                time: '今天 15:00-16:00',
                specialty: 'CE认证、REACH法规',
                available: true
              },
              {
                expert: '王教授 - 德国法规顾问',
                time: '明天 10:00-11:00',
                specialty: 'PPWR包装法、德国市场准入',
                available: true
              },
              {
                expert: '陈律师 - 欧盟法律专家',
                time: '明天 14:00-15:00',
                specialty: '法规合规、法律风险评估',
                available: false
              }
            ]
          }
        }
        showModal.value = true
        isLoading.value = false
      }, 1500)
    }

    // 合规检查功能
    const quickComplianceCheck = async () => {
      isLoading.value = true
      addNotification('正在进行快速合规检测...', 'info')
      
      setTimeout(() => {
        modalContent.value = {
          title: '快速合规检测结果',
          type: 'compliance_check',
          data: {
            overallScore: 94.2,
            checks: [
              {
                category: 'CE认证',
                score: 98,
                status: 'passed',
                details: '所有文件完整，符合最新标准'
              },
              {
                category: 'REACH法规',
                score: 92,
                status: 'warning',
                details: '2个化学物质需要更新安全数据表'
              },
              {
                category: '包装法规',
                score: 89,
                status: 'alert',
                details: '需要适配新的PPWR要求'
              }
            ]
          }
        }
        showModal.value = true
        isLoading.value = false
        addNotification('合规检测完成，发现3个需要关注的项目', 'warning')
      }, 3000)
    }

    const reviewCertificationDocs = () => {
      window.location.href = '#/policy-detail?type=certification_review'
      addNotification('正在打开认证文件审核系统...', 'info')
    }

    const generateRiskAssessment = async () => {
      isLoading.value = true
      addNotification('正在生成风险评估报告...', 'info')
      
      setTimeout(() => {
        const riskReport = {
          assessmentDate: new Date().toLocaleDateString(),
          overallRisk: 'medium',
          riskFactors: [
            {
              factor: 'REACH法规更新',
              level: 'high',
              impact: '影响23个客户项目',
              mitigation: '建立法规监控机制，提前6个月预警'
            },
            {
              factor: 'Brexit后续影响',
              level: 'medium',
              impact: '英国市场准入成本增加15%',
              mitigation: '开发替代认证路径，分散市场风险'
            },
            {
              factor: '环保法规趋严',
              level: 'medium',
              impact: '包装材料要求提高',
              mitigation: '与供应商合作开发环保包装方案'
            }
          ],
          recommendations: [
            '建立24小时法规监控系统',
            '增加欧盟本地合作伙伴',
            '设立应急合规基金',
            '定期进行合规培训'
          ]
        }
        
        // 模拟下载报告
        const blob = new Blob([JSON.stringify(riskReport, null, 2)], { type: 'application/json' })
        const url = URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = url
        a.download = `欧盟合规风险评估报告_${new Date().toLocaleDateString()}.json`
        a.click()
        
        isLoading.value = false
        addNotification('风险评估报告已生成并下载', 'success')
      }, 2500)
    }

    // 报告生成功能
    const generateComplianceReport = async () => {
      isLoading.value = true
      addNotification('正在生成合规状况报告...', 'info')
      
      setTimeout(() => {
        const complianceReport = {
          reportDate: new Date().toLocaleDateString(),
          clientSummary: {
            totalClients: 156,
            activeProjects: 78,
            complianceRate: 98.7,
            avgProcessingTime: '12天'
          },
          countryBreakdown: {
            germany: { projects: 23, complianceRate: 99.1 },
            france: { projects: 18, complianceRate: 98.5 },
            italy: { projects: 15, complianceRate: 97.8 },
            spain: { projects: 12, complianceRate: 99.2 },
            netherlands: { projects: 10, complianceRate: 98.9 }
          },
          recentAchievements: [
            '成功处理156个CE认证项目',
            '零重大合规事故记录',
            '客户满意度保持98.7%',
            '平均处理时间优化至12天'
          ]
        }
        
        const blob = new Blob([JSON.stringify(complianceReport, null, 2)], { type: 'application/json' })
        const url = URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = url
        a.download = `合规状况月度报告_${new Date().toLocaleDateString()}.json`
        a.click()
        
        isLoading.value = false
        addNotification('合规状况报告已生成并下载', 'success')
      }, 2000)
    }

    const downloadRegulationSummary = async () => {
      isLoading.value = true
      addNotification('正在下载法规更新摘要...', 'info')
      
      setTimeout(() => {
        const regulationSummary = {
          updatePeriod: '2024年12月',
          totalUpdates: 47,
          criticalUpdates: 8,
          countryUpdates: {
            germany: 12,
            france: 8,
            italy: 7,
            spain: 6,
            netherlands: 5,
            others: 9
          },
          keyChanges: [
            'PPWR包装法案最终版本发布',
            'REACH法规新增15种高关注物质',
            '数字产品护照要求明确',
            'CE认证流程数字化更新'
          ]
        }
        
        const blob = new Blob([JSON.stringify(regulationSummary, null, 2)], { type: 'application/json' })
        const url = URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = url
        a.download = `欧盟法规更新摘要_${new Date().toLocaleDateString()}.json`
        a.click()
        
        isLoading.value = false
        addNotification('法规更新摘要已下载', 'success')
      }, 1500)
    }

    const generateClientPresentation = async () => {
      isLoading.value = true
      addNotification('正在生成客户汇报材料...', 'info')
      
      setTimeout(() => {
        alert('客户汇报材料已生成！\n\n包含内容：\n• 项目进度总览\n• 合规状态分析\n• 风险评估报告\n• 下一步行动计划\n\n材料已发送至客户邮箱')
        isLoading.value = false
        addNotification('客户汇报材料已生成并发送', 'success')
      }, 2000)
    }

    // 一键服务功能
    const generateEmergencyPlan = async () => {
      if (!confirm('是否立即生成紧急合规方案？这将启动应急响应流程。')) return
      
      isLoading.value = true
      addNotification('正在生成紧急合规方案...', 'info')
      
      setTimeout(() => {
        modalContent.value = {
          title: '紧急合规方案',
          type: 'emergency_plan',
          data: {
            alertLevel: 'red',
            affectedClients: 23,
            urgentActions: [
              '立即通知所有受影响客户',
              '启动72小时应急响应流程',
              '联系欧盟认证机构确认细节',
              '准备替代合规方案',
              '设立客户热线提供咨询'
            ],
            timeline: '72小时内完成所有应急措施',
            contactList: [
              '德国TÜV认证机构：+49-xxx-xxxx',
              '法国AFNOR：+33-xxx-xxxx',
              '应急法律顾问：+86-xxx-xxxx'
            ]
          }
        }
        showModal.value = true
        isLoading.value = false
        addNotification('紧急合规方案已启动', 'warning')
      }, 3000)
    }

    const batchNotifyClients = async () => {
      const clientCount = prompt('请输入要通知的客户数量（当前156个客户）：', '156')
      if (!clientCount) return
      
      isLoading.value = true
      addNotification(`正在向${clientCount}个客户发送通知...`, 'info')
      
      setTimeout(() => {
        addNotification(`已成功向${clientCount}个客户发送法规更新通知`, 'success')
        addNotification('通知内容包括：PPWR包装法案更新、应对建议', 'info')
        isLoading.value = false
      }, 2000)
    }

    const getAIRecommendations = async () => {
      isLoading.value = true
      addNotification('AI正在分析业务数据...', 'info')
      
      setTimeout(() => {
        modalContent.value = {
          title: 'AI智能业务建议',
          type: 'ai_recommendations',
          data: {
            priority: [
              {
                level: 'high',
                suggestion: '建议在Q1增加瑞典、挪威业务',
                reason: '北欧市场合规需求增长45%，竞争相对较少',
                expectedReturn: '预计年收入增长25%'
              },
              {
                level: 'medium',
                suggestion: '建立AI文档审查系统',
                reason: '可提高审查效率300%，降低人工成本60%',
                expectedReturn: '年节省成本80万元'
              },
              {
                level: 'medium',
                suggestion: '开发移动端客户服务APP',
                reason: '客户查询效率提升，满意度预计提升15%',
                expectedReturn: '客户粘性增强，续约率提升'
              }
            ],
            marketTrends: [
              '环保法规将持续收紧，绿色认证需求增长',
              '数字化合规工具成为市场主流',
              '多国一站式服务需求增长35%'
            ]
          }
        }
        showModal.value = true
        isLoading.value = false
      }, 2500)
    }

    const generateMonthlyReport = async () => {
      isLoading.value = true
      addNotification('正在生成月度业务报告...', 'info')
      
      setTimeout(() => {
        const monthlyReport = {
          reportMonth: new Date().toLocaleDateString(),
          businessMetrics: {
            totalRevenue: '280万元',
            newClients: 23,
            completedProjects: 156,
            clientSatisfaction: '98.7%',
            avgResponseTime: '2.3小时'
          },
          topPerformingServices: [
            { service: 'CE认证咨询', projects: 89, revenue: '156万元' },
            { service: 'REACH法规咨询', projects: 45, revenue: '78万元' },
            { service: '包装法规咨询', projects: 34, revenue: '46万元' }
          ],
          challenges: [
            'PPWR包装法案实施带来的客户咨询激增',
            '德国认证机构处理周期延长',
            '新法规培训需求增加'
          ],
          nextMonthPlans: [
            '启动北欧市场拓展计划',
            '上线AI智能文档审查系统',
            '举办客户法规培训会议'
          ]
        }
        
        const blob = new Blob([JSON.stringify(monthlyReport, null, 2)], { type: 'application/json' })
        const url = URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = url
        a.download = `珠海咨询公司月度报告_${new Date().toLocaleDateString()}.json`
        a.click()
        
        isLoading.value = false
        addNotification('月度业务报告已生成并下载', 'success')
      }, 3000)
    }

    const closeModal = () => {
      showModal.value = false
      modalContent.value = null
    }

    onMounted(() => {
      // Simulate real-time updates
      setInterval(() => {
        realTimeData.regulationUpdates += Math.floor(Math.random() * 3)
      }, 30000)
      
      // 初始化欢迎消息
      addNotification('欢迎使用珠海智能合规管理系统', 'success')
    })
    
    return {
      themeState,
      realTimeData,
      notifications,
      isLoading,
      showModal,
      modalContent,
      
      // 法规监控
      openRegulationAlert,
      compareRegulations,
      analyzeRegulationTrends,
      
      // 客户服务
      openProjectManagement,
      openOnlineConsulting,
      bookExpertAppointment,
      
      // 合规检查
      quickComplianceCheck,
      reviewCertificationDocs,
      generateRiskAssessment,
      
      // 报告生成
      generateComplianceReport,
      downloadRegulationSummary,
      generateClientPresentation,
      
      // 一键服务
      generateEmergencyPlan,
      batchNotifyClients,
      getAIRecommendations,
      generateMonthlyReport,
      
      closeModal,
      addNotification
    }
  }
}
</script>

<style scoped>
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.text-electric-500 {
  color: #60a5fa;
}

.bg-electric-500 {
  background-color: #60a5fa;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: rgba(96, 165, 250, 0.5);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(96, 165, 250, 0.7);
}
</style> 